<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <a href="/app01/add_students.html">添加</a>
        {% load staticfiles %}
    </div>
    <div>
        <table border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for row in stu_list  %}
                    <tr nid="{{ row.id }}">
                        <td>
                            {{ row.id }}
                        </td>
                        <td>
                            {{ row.username }}
                        </td>
                        <td>
                            {{ row.age }}
                        </td>

                        <td>
                            {{ row.gender }}
                        </td>
                        <td>
                            {{ row.cs.title }} <!-- row.cs.title 通过对象去取 -->
                        </td>
                        <td>
                            <a href="/app01/del_students.html?nid={{ row.id }}">删除</a>
                            |
                            <a onclick="removeStudent(this)"; href="javascript:void(0)";>Ajax删除</a>
                            |
                            <a href="/app01/edit_students.html?nid={{ row.id }}">编辑</a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <script src={% static 'jquery-3.3.1.js' %}></script>
    <script>
        function  removeStudent(ths) {
            var nid = $(ths).parent().parent().attr('nid');
            $.ajax({
                url: '/app01/ajax4.html',
                type: 'GET',
                data: {nid: nid},
                success:function (arg) {
                    if(arg == '成功'){
                        // window.location.reload();
                        $(ths).parent().parent().remove();
                    }else{
                        alert(arg);
                    }
                }
            })
        }
    </script>
</body>
</html>